<template>
<div class="update-log views-container">
    <div class="wlm-form">
        <div class="update-title">更新日志</div>
        <div class="updata-content flex-row" v-for="(item, index) in categoryData" :key="index">
            <div class="left flex-col main-height">
                <p class="orders-blue f-20">{{item.updated_at*1000 | parseTime('{d}')}}</p>
                <p>{{item.updated_at*1000 | parseTime('{y}-{m}')}}</p>
            </div>
            <div class="right flex-col">
                <div class="dian"></div>
                <div class="flex-row flex-justify-b">
                    <div class="f-20 title main-height big">版本号：{{item.version}}</div>
                    <p class="orders-gray">{{item.updated_at*1000 | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                </div>
                <div class="item">
                    <div v-html="item.content"></div>
                </div>
                <!-- <div class="item">
                    <span :class="colorItem[item.color]">【{{item.color==1?'优化':item.color==2?'新增':item.color==3?'修复':''}}】</span>
                    附加费反反复复付付付付付付付付付付付付付付付付付付</div> -->
                <!-- <div class="item"><span :class="colorItem[item.color]">【{{item.color==1?'优化':item.color==2?'新增':item.color==3?'修复':''}}】</span>
                    附加费反反复复付付付付付付付付付付付付付付付付付付</div> -->
            </div>
        </div>
        <el-button style="margin:20px 0 20px 120px;" @click="loadmore">加载更多</el-button>
    </div>
</div>
</template>

<script>
import {
  updateLog
} from '@/api/cloudservice'
export default {
  name: 'UpdateLog',
  components: {

  },
  created() {
    this.getList()
  },
  data() {
    return {
      mypage: 1,
      categoryData: [],
      colorItem: {
        '1': 'orders-blue',
        '2': 'orders-red',
        '3': 'orders-green'
      },
      yanse: [
        { color: 1 },
        { color: 2 },
        { color: 3 },
        { color: 4 },
        { color: 5 }
      ]
    }
  },
  methods: {
    getList() {
      updateLog({ page: 1 }).then((response) => {
        const {
          data: {
            data: msgData = []
          }
        } = response
        this.categoryData = msgData.logs
        console.log(this.categoryData)
      })
    },
    loadmore() {
      this.mypage += 1
      updateLog({ page: this.mypage }).then((response) => {
        const {
          data: {
            data: msgData = []
          }
        } = response
        msgData.logs.map(item => {
          this.categoryData.push(item)
        })
        if (msgData.logs.length === 0) {
          this.$message({
            message: '没有更多了',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.update-log {
    font-size: 14px;

    .f-20 {
        font-size: 20px;
    }

    .update-title {
        padding: 20px 30px;
        border-bottom: 1px solid rgb(238, 238, 238);
    }

    .updata-content {
        .main-height {
            height: 52px;
        }

        .big {
            line-height: 52px;
        }

        .left {
            margin: 42px 30px 0;
            text-align: center;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .right {
            position: relative;
            padding: 42px 30px 40px;
            border-left: 1px solid rgb(238, 238, 238);
            border-bottom: 1px solid rgb(238, 238, 238);
            width: 100%;

            .title {
                margin-bottom: 12px;
                font-weight: 600;
            }

            .item {
                margin-bottom: 10px;
            }

            .dian {
                height: 6px;
                width: 6px;
                border-radius: 50%;
                position: absolute;
                background: #409EFF;
                top: 64px;
                left: -3px;
            }
        }
    }
}
</style>
